<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 200 - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")");

    var x = d3.scaleTime()
        .domain([new Date(), new Date(Date.now() + 36 * 3600 * 1000 + 26 * 60 * 1000 + 11 * 1000)]) // 设置时间范围
        .range([0, width]);

    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    var zoom = d3.zoom()
        .scaleExtent([1, Infinity])
        .on("zoom", zoomed);

    svg.call(zoom);

    function zoomed() {
        svg.select(".x.axis")
            .call(d3.axisBottom(x).scale(x.copy().rangeRound([0, d3.event.transform.rescaleX(x).domain()[1]])));
    }
</script>
</body>
</html>